import React from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Dialog } from "react-vant";
import CopyText from "../../components/CopyText";
import style from "./index.module.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const questionsAndAnswers = [
    {
      question: "如何使用微脉挂号？",
      answer:
        "进入微脉，点击首页上的【去挂号】进入挂号流程，点击选择医院、选择科室、选择医生，最后选择时间段，有些城市还需添加就诊卡或健康卡，按提示绑定成功，确认无误后点击【确认挂号】即成功挂号。",
    },
    {
      question: "挂号成功后需要退号该如何退号？",
      answer:
        "在微脉APP右下角【我的】-【我的订单】-点击【预约挂号】-【预约成功】-【退号】，即可完成退号操作哦~（当天的号和不支持线上退号的医院需要到医院窗口取消）",
    },
    {
      question: "挂号成功后需要退号该如何退号？",
      answer:
        "在微脉APP右下角【我的】-【我的订单】-点击【预约挂号】-【预约成功】-【退号】，即可完成退号操作哦~（当天的号和不支持线上退号的医院需要到医院窗口取消）",
    },
    {
      question: "挂号成功后需要退号该如何退号？",
      answer:
        "在微脉APP右下角【我的】-【我的订单】-点击【预约挂号】-【预约成功】-【退号】，即可完成退号操作哦~（当天的号和不支持线上退号的医院需要到医院窗口取消）",
    },
    {
      question: "挂号成功后需要退号该如何退号？",
      answer:
        "在微脉APP右下角【我的】-【我的订单】-点击【预约挂号】-【预约成功】-【退号】，即可完成退号操作哦~（当天的号和不支持线上退号的医院需要到医院窗口取消）",
    },
    // 其他问题和答案对象依次添加
  ];
  const xzs = () => {
    window.location.href =
      "https://tongyi.aliyun.com/qianwen/?spm=5176.28326591.0.0.40f76ee15fNl8T";
  };
  return (
    <div className={style.ContactCustomerServiceBox}>
      <CopyText text="Hello, world!" />

      <div>
        <NavBar title="帮助与反馈" onClickLeft={() => navigate(-1)} />
      </div>
      <div className={style.county}>
        <div>
          <img src="../../../src/assets/xmzs.png" />
          <div onClick={() => xzs()}>小脉助手</div>
          <div className={style.txt}>在线客服 为您服务</div>
        </div>
        <div
          onClick={() =>
            Dialog.confirm({
              title: "请确认",
              message: "是否呼叫:1553075278",
              onCancel: () => console.log("cancel"),
              onConfirm: () => navigate('/phone'),
            })
          }
        >
          <div>
            <img src="../../../src/assets/lxkf.png" />
          </div>
          <div className={style.txt}>联系客服</div>
          <div className={style.txt}>工作时间:9:00-17:30</div>
          <div className={style.txt}>周末及法定节假日休息</div>
        </div>
      </div>
      {questionsAndAnswers.map((qa, index) => (
        <div key={index} className={style.questionanswer}>
          <p className={style.question}>
            <span>Q</span>
            {qa.question}
          </p>
          <p className={style.answer}>
            <span>A</span>
            {qa.answer}
          </p>
        </div>
      ))}
    </div>
  );
};
export default Index;
